<script setup lang="ts">
import { defineProps } from 'vue'
import useimgControl from '@/components/index/card/hooks/imgControl'
import type { CardData } from '@/types/loginType'
import useImgFont from '@/utils/fontImg'
const { imgArt } = useImgFont()
const { showCard } = useimgControl()
defineProps<{
  card: CardData
}>()
</script>

<template>
  <article>
    <img :src="card.mainImg || imgArt.img" title="" />
    <p @click="showCard(card.id)">{{ card.content }}</p>
  </article>
</template>

<style scoped lang="less">
article {
  padding: 0 10px;
  margin: 10px 0 4px;
  height: 94px;

  img {
    float: left;
    width: 82px;
    height: 82px;
    margin-right: 1em;
    border-radius: var(--radius);
  }
  p {
    font-size: 12px;
    text-indent: 2em;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
